import React from 'react';
import './forms.scss'

import { useFormItemInit } from './hooks';
import { Tooltip } from 'antd';
import { CopyOutlined } from '@ant-design/icons';
import { FormControl } from '../../utils/form/FormControl';
import { Utils } from '../../utils/utils';
import { Platform } from '../../utils/platform';
import { WebUtils } from '../../utils/web';



interface IProps {
    formControl: FormControl,
    className?: string,
    style?: React.CSSProperties,
    onSelectorClick?: () => void
}
/**
 * 表单公共 Label
 * @param props 
 * @returns 
 */

const Readonly = React.forwardRef<any, IProps>((props, ref) => {
    const { formControl, className = '', style = {}, onSelectorClick = () => { } } = props;

    const { selectorStyle, displayValue, readonly, value, } = useFormItemInit(formControl, className, style);

    const textRef = React.useRef<HTMLSpanElement>(null);

    // const [title, setTitle] = React.useState('');

    React.useEffect(() => {
        if (textRef.current) {
            const isOverflow = WebUtils.checkTextOverflow(textRef.current, '14px');
            if (isOverflow) {
                // setTitle(displayValue);
            } else {
                // setTitle('');
            }
        }
    }, [displayValue]);

    /** 复制 */
    const copy = async (text: string) => {
        const copyRes = await WebUtils.copyText(text);
        if (copyRes) {
            alert('已复制到剪切板');
        } else {
            alert('复制失败');
        }
    }

    /** 是否显示title */
    const [showTitle, setShowTitle] = React.useState(Platform.isMobile ? false : true);
    React.useEffect(() => {
        if (formControl.selector === 'currency' && Utils.isEmpty(value)) {
            setShowTitle(false);
        }
    }, []);

    /** 渲染 title */
    const renderTitle = () => {
        let coypValue = '';
        switch(formControl.selector){
            case 'currency':
                coypValue = value+'';
                break;
            default:
                coypValue = displayValue;
        }
        return <>
            <div className='readonly-tip'>{coypValue} <CopyOutlined onClick={() => copy(coypValue)} className='copy' /></div>
        </>
    }

    const displayClassName = () => {
        if (readonly) {
            return '';
        } else {
            return 'display-value';
        }
    }

    const onClick = () => {
        if (readonly) {
            return;
        }
        onSelectorClick();
    }


    

    return (
        <>
            <div
                onClick={() => onClick()}
                style={selectorStyle}
                className={`readonly ${className} ${displayClassName()}`}
                ref={ref as React.RefObject<HTMLDivElement>}>

                <span ref={textRef} className='text'>
                    {
                        showTitle ? <Tooltip title={renderTitle} overlayClassName='abc'>{displayValue}</Tooltip> : displayValue
                    }
                </span>

                {
                    formControl.controlData.suffix &&
                    <span className='unit'>{formControl.controlData.suffix}</span>
                }
            </div>
        </>
    )
});


export default Readonly;